Vite plus, Vite 8 and Nitro 3 beta - #718

🏁 Script executed:

#!/bin/bash
set -euo pipefail

echo "== Check whether non-standard JSX-bearing extensions exist =="
fd -H -E node_modules -e mdx -e mdc -e astro -e vue -e svelte .

echo
echo "== Check if viteReact is configured with custom include/exclude =="
rg -n "viteReact\\(" vite.config.ts vitest.config.ts vite.storybook.ts || true

Repository: BearStudio/start-ui-web

Length of output: 278

🏁 Script executed:

cat -n vite.config.ts | sed -n '35,55p'

Repository: BearStudio/start-ui-web

Length of output: 720

🏁 Script executed:

cat -n vite.config.ts | sed -n '42,47p'

Repository: BearStudio/start-ui-web

Length of output: 256

🏁 Script executed:

rg -A5 "babel\(" vite.config.ts | head -20

Repository: BearStudio/start-ui-web

Length of output: 214

🏁 Script executed:

rg -n "reactCompilerPreset" vite.config.ts -B5 -A2

Repository: BearStudio/start-ui-web

Length of output: 678

🏁 Script executed:

rg -n "import.*react" vite.config.ts | head -20

Repository: BearStudio/start-ui-web

Length of output: 208

🌐 Web query:

reactCompilerPreset @vitejs/plugin-react babel dependencies

💡 Result:

@vitejs/plugin-react already ships with (and uses) Babel internally—so you generally do not need to add Babel packages as your own dependencies just to use its React/JSX transforms (or a “React Compiler preset” style setup inside the plugin).

What Babel-related deps @vitejs/plugin-react brings

For example, @vitejs/plugin-react@5.0.1 lists these Babel deps as package dependencies:

• @babel/core
• @babel/plugin-transform-react-jsx-self
• @babel/plugin-transform-react-jsx-source
  [1]

What you must add for React Compiler

To enable React Compiler in a Vite + @vitejs/plugin-react project, React’s official docs instruct installing the compiler Babel plugin as a devDependency and adding it to the plugin-react Babel config:

• install: babel-plugin-react-compiler@latest
• configure in vite.config.js: react({ babel: { plugins: ['babel-plugin-react-compiler'] } })
  [2]

If you’re compiling a library (often the missing dependency)

If you’re compiling a library and need compatibility with React versions below 19, React recommends adding:

• react-compiler-runtime as a direct runtime dependency
  [3]

Sources:
[1] @vitejs/plugin-react@5.0.1 dependency list (ReversingLabs) (secure.software)
[2] React Compiler installation guide (Vite section) (react.dev)
[3] React “Compiling Libraries” guide (runtime dependency recommendation) (react.dev)

Citations:

• 1: https://secure.software/npm/packages/%40vitejs/plugin-react/dependencies/5.0.1
• 2: https://react.dev/learn/react-compiler/installation
• 3: https://react.dev/reference/react-compiler/compiling-libraries?utm_source=openai

🌐 Web query:

"@babel/preset-react" "reactCompilerPreset" vitejs

💡 Result:

reactCompilerPreset is not an option supported by @babel/preset-react (it only documents options like runtime, development, importSource, etc.). [1]

To enable the React Compiler in a Vite app, you add it as a Babel plugin (and it must run first), typically via @vitejs/plugin-react:

// vite.config.js
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

export default defineConfig({
  plugins: [
    react({
      babel: {
        plugins: ["babel-plugin-react-compiler"], // should run first
      },
    }),
  ],
});

[2]

If you’re instead using a separate Babel step (e.g. vite-plugin-babel), then you provide the compiler plugin there and add presets like @babel/preset-typescript only if needed. [2]

-      viteReact(),
-      babel({
-        presets: [
-          ['@babel/preset-react', { runtime: 'automatic' }],
-          reactCompilerPreset(),
-        ],
-      }),
+      viteReact({
+        babel: {
+          plugins: ['babel-plugin-react-compiler'],
+        },
+      }),

(Ensure babel-plugin-react-compiler is installed as a dev dependency.)

🌐 Web query:

In Vite 8 / vite-plus config, should loadEnvuse themodeargument fromdefineConfig(({ mode }) => ...)rather thanprocess.env.MODEorprocess.env.NODE_ENV?

💡 Result:

Yes, in Vite 8 (and vite-plus config, which extends Vite config), loadEnv should use the mode argument from defineConfig(({ mode }) => ...) rather than process.env.MODE or process.env.NODE_ENV. The official Vite documentation explicitly shows this pattern: import { defineConfig, loadEnv } from 'vite' export default defineConfig(({ mode }) => { const env = loadEnv(mode, process.cwd, '') return { define: { APP_ENV: JSON.stringify(env.APP_ENV), }, } }) This loads the correct .env.[mode] files based on the Vite mode (e.g., 'development', 'production', 'staging'), which determines env file loading priority. process.env.NODE_ENV is distinct from Vite's mode—they can differ (e.g., vite build --mode staging sets mode='staging' but NODE_ENV='production'). Using process.env.MODE is non-standard and incorrect, as Vite does not set it; the mode param is the authoritative source. Vite 8 release notes confirm no breaking changes to config or loadEnv. vite-plus uses defineConfig from 'vite-plus' but follows the same Vite config structure, including loadEnv(mode) usage.

Citations:

• 1: https://v6.vite.dev/config
• 2: https://vite.dev/config/
• 3: https://vite.dev/guide/env-and-mode
• 4: https://main.vite.dev/guide/env-and-mode
• 5: https://github.com/vitejs/vite/blob/8e05b61d/packages/vite/CHANGELOG.md
• 6: https://main.vite.dev/blog/announcing-vite8
• 7: https://github.com/vitejs/vite/blob/v8.0.0/packages/vite/CHANGELOG.md
• 8: https://viteplus.dev/
• 9: https://viteplus.dev/config/

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.